<template>
  <div class="circle-twinkle" 
    :style="{width: size, height: size, borderRadius: size, boxShadow: boxShadow, animationDuration: duration, backgroundColor: bgColor}">
  </div>
</template>

<script>
export default {
  name: "CircleTwinkle",
  data() {
    return {

    }
  },
  props: {
    size: {
      type: String,
      default: "20px"
    },
    boxShadow: {
      type: String,
      default: '0 0 10px #fff, 0 0 20px rgb(0, 126, 170)'
    },
    duration: {
      type: String,
      default: '2s'
    },
    bgColor: {
      type: String,
      default: "rgba(0, 0, 0, 0)"
    }
  }
}
</script>
<style lang="less" scoped>
.circle-twinkle {
  animation: heartbeat infinite;
}
@keyframes heartbeat {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>